<template>
  <div class="container">
    <div class="top-container">
      <div class="top-content">
        <div class="top-content-left">
          <div class="top-content-left-card">
            <p>{{ status == 1 ? '招聘中' : '没有招聘' }}</p>
            <p>
              <span>{{ jobName }}</span>
              <span class="job-salary">{{ galary }}</span>
            </p>
            <p>
              {{ category }}

            </p>
          </div>

        </div>
        <div class="top-content-right">
          <div class="top-content-right-card">
            <div class="company-info">
              <div>
                公司基本信息
              </div>
              <p>
                <el-tag type="danger">公司名称：{{ companyName }}</el-tag>
              </p>
              <p>
                <el-tag type="success">人数规模：{{ companyCount }}人</el-tag>
              </p>
              <p>
                <el-tag type="warning">公司地址：{{ address }}人</el-tag>
              </p>
            </div>
            <img class="company-logo" :src="companySrc" alt="">
          </div>
        </div>
      </div>
    </div>
    <el-divider>职位信息</el-divider>
    <div class="main-container">
      <div class="main-content">
        <div class="job-description">
          <h2>职位描述</h2>
          <div class="job-skill">
            <h3>要求技能</h3>
            <p v-for=" item, index  in this.skill" :key="index">{{ index + 1 }}.{{ item }}</p>
          </div>
          <div class="job-lable">
            <h3>工作时间</h3>
            <p>
              <el-tag v-for="item, index in labels" :key="index" effect="plain">
                {{ item }}
              </el-tag>
            </p>
          </div>
          <div class="job-welfare">
            <h3>工作福利</h3>
            <p>
              <el-tag v-for="item, index in welfare" :key="index" effect="plain">
                {{ item }}
              </el-tag>
            </p>
          </div>
        </div>

        <div class="boss-description">
          <el-divider>boss信息</el-divider>

          <el-avatar :size="100" :src="avatarUrl">
          </el-avatar>
          <div class="boss-lable-name">
            {{ bossName }}
          </div>
          <div class="boss-lable-phone">
            电话：{{ bossPhone }}

          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jobAPI from '@/api/jobApi'
export default {
  data() {
    return {
      //1招聘中0停止招聘
      status: 1,
      jobId: '',
      bossName: '张女士',
      bossPhone: '13281015865',
      galary: '',
      companySrc: '',
      avatarUrl: 'https://img.bosszhipin.com/beijin/mcs/useravatar/20200108/a29561aa1094abbb509a879b6fc3b733cfcd208495d565ef66e7dff9f98764da_s.jpg',
      skill: ['短途骑车配送', '美团', '公司提供电动车', '商圈骑车配送（指定区域内）'],
      jobName: '成都服务器',
      companyName: '成都精灵云科技有限公司',
      companyCount: '100~999',
      address: '成都武侯区新会展中心',
      category: "计算机",
      labels: ['5天/周', '3个月', '本科'],
      welfare: ['带薪年假', '家属基金', '交通补助', '通讯补贴', '节日福利', '员工旅游', '年终奖', '加班补助', '全勤奖', '零食下午茶'],
    }

  },
  mounted() {
    this.jobId = this.$route.query.jobId
    // console.log(this.jobId)
    this.getDetail();

  },
  methods: {
    getDetail() {
      // console.log("detail")
      jobAPI.jobAPI.getDetailJob(this.jobId).then(res => {
        // console.log(res.data.data)
        var data = res.data.data;
        this.skill = data.skill.replace("[", "").replace("]", "").split(",")
        this.address = data.address;
        this.avatarUrl = data.avatar;
        this.category = data.category;
        this.companyName = data.companyName;
        this.companyCount = data.count;
        this.bossName = data.employerName;
        this.galary = data.galary;
        this.companySrc = data.image;
        this.labels = data.labels.replace("[", "").replace("]", "").split(",");
        this.bossPhone = data.phone;
        this.status = data.status;
        this.welfare = data.welfare.replace("[", "").replace("]", "").split(",");
        this.jobName = data.jobName;

      }).catch(err => {
        // console.log(err)

      })

    }
  }
}
</script>

<style lang="less" scoped>
.boss-lable-name,
.boss-lable-phone {
  margin: 10px 10%;
  transform: translate(1vw, -13vh);
}

.boss-lable-name {
  font-size: 30px;
  font-weight: bolder;
}

.boss-lable-phone {
  margin-top: 5px;
  font-size: 20px;
}

.boss-description {
  margin: 40px 15px;
  padding: 0 10px;
  color: whitesmoke;
}

.el-tag {
  margin: 0 5px;
}

.el-tag--plain {
  background-color: rgb(0 0 0 / 0%);
  border-color: #b3d8ff;
  color: white;
  font-size: 15px;

  /* opacity: 1; */
}

.job-skill p,
.job-lable p,
.job-welfare p {
  color: whitesmoke;
  margin-left: 10px;
  height: auto;
}


.job-skill,
.job-lable,
.job-welfare {
  margin-left: 20px;
}

.el-divider__text {
  position: absolute;
  background-color: #c0c4cc;
  padding: 0 20px;
  font-weight: 500;
  color: #303133;
  border-radius: 10px;
}

.job-description {
  padding: 0 5px;
}

.top-content-left-card>p:nth-child(1) {
  color: whitesmoke;
  font-size: 20px;
}

.top-content-left-card>p:nth-child(2) {
  color: whitesmoke;
  font-size: 30px;
  font-weight: bolder;
}

.top-content-left-card>p:nth-child(2)>span:nth-child(2) {
  color: orange;
  font-size: 30px;
  font-weight: bolder;
  margin: 0 5px;
}

.top-content-left-card>p:nth-child(3) {
  color: whitesmoke;
  font-size: 15px;
  font-weight: bolder;
}

.job-salary {
  float: right;
}

.top-content {
  display: flex;
  justify-content: space-between;

}

.main-content {
  width: 80%;
  margin: 10px auto;
  height: 90%;
  background-color: #636e72;
  border: #74b9ff 1px solid;
  border-radius: 20px;

}

.container {
  background-color: #b2bec3;
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.el-divider {
  margin: 5px 0;
}

.top-container {
  height: 30vh;
  width: 100%;
  padding-top: 0.05vh;
  padding-bottom: 0.05vh;
  font-size: 20px;

}

.main-container {
  width: 100%;
  height: auto;
  background-color: #b2bec3;

  padding-top: 0.05vh;
  padding-bottom: 0.05vh;

}

.top-content-left-card {
  padding: 10px;
  background-color: #345a6d;
  margin: 10px;
  border-radius: 15px;
  min-height: 85%;
  min-width: 85%;
  width: 95%;
  height: 85%;
  max-height: 85%;
  max-width: 95%;
  line-height: 30px;

}

.top-content-right-card {
  display: flex;
  padding: 10px;
  background-color: #95afc0;
  margin: 10px;
  border-radius: 15px;
  min-height: 85%;
  min-width: 85%;
  width: 95%;
  height: 85%;
  max-height: 85%;
  max-width: 95%;
  align-items: center;
  align-content: stretch;
  flex-wrap: wrap;

}

.top-content-left {
  flex: 1;
  border-radius: 15px;
}

.top-content-right {
  flex: 1;
}

.company-info {
  flex: 2;
  color: #2d3436;
  padding: 5px;
}

.company-logo {
  flex: 1;
  border-radius: 50%;
  overflow: hidden;
}
</style>